<script setup>
import { ref, onMounted, reactive, nextTick, watch } from 'vue'
import http from '@/utils/http';
import { getTrademark, reqAddOrUpdateTrademark,reqDeleteTrademark,reqUploadTrademarkLogo } from '@/api/product'
import { ElMessage } from 'element-plus'
import settings from '@/settings';
import useCategoryStore from '@/store/category';

let categoryStore = useCategoryStore()
let scene = ref(0)  // 控制分类选项的可用与禁用，并控制场景显示

let pageNo = ref(1)  // 当前页码
let limit = ref(10)  // 每页多少条数据
let total = ref(0)  // 总的有多少条数据
let total_page = ref()  // 总的有多少页

let dialogFormVisible = ref(false)  // 控制对话框显示与隐藏的变量
let trademarkArr = ref([])  // 存放当前页的数据
let trademarkParams = reactive({ tmName: '', logoUrl: '' })
let formRef = ref()  // 获取对话框的表单实例，注意这里的变量名要和组件绑定的ref值相同才行
let old_trademarkParams = null  // 记录老的数据，修改品牌时，用来对比数据是否被修改

let file_upload = ref()  // 获取文件上传组件的实例
let fileList = ref([])  // 保存要上传的文件对象
let logoImgUrl = ref()  // 添加或者编辑品牌时，保存img标签的图片地址

const getHasTrademark = async (pager = 1) => {
    // 页面发生改变时候，element会自动传递当前页数参数，页面数据个数发生改变时不会传递参数，那pager就会等于1
    pageNo.value = pager
    // 获取品牌信息
    let result = await getTrademark(pageNo.value, limit.value,categoryStore.c3Id)
    if (result.data.code == 200) {
        total.value = result.data.data.total_num
        trademarkArr.value = result.data.data.trademark_list
    } else {
        ElMessage({
            type: 'error',
            message: result.data.msg
        })
    }
}

onMounted(() => {
    if(categoryStore.c3Id){
        getHasTrademark()
    }
})

// 监控categoryStore.c3Id，三级分类id一旦变化，就发送请求获取数据
watch(()=>categoryStore.c3Id,()=>{
    if(categoryStore.c3Id){
        getHasTrademark()
    }
})

// 当每页数量发生改变时，触发该函数
const sizeChange = () => {
    // pageNo.value=1  // 页面数量发生改变时，返回第一页的数据，可以用这种写法
    getHasTrademark()
}

// 页面改变时，触发的函数
// const changePageNo = ()=>{
//     getHasTrademark()
// }

// 如果是用elment默认的方式上传文件，那么上传后会触发这个函数，不过本次使用的是自定义上传方法
const handleAvatarSuccess = (response, uploadFile) => { }

// 上传的文件发生改变时执行的函数
const fileChange = (file) => {
    console.log('文件发生改变');
    fileList.value=[]
    if (file.raw.type == 'image/png' || file.raw.type == 'image/jpeg' || file.raw.type == 'image/gif') {
        if (file.raw.size / 1024 / 1024 < 4) {
            // let fr = new FileReader();  // 创建一个读取文件对象 ECMAScript 新出的方法
            // fr.onload = function(e){  // 读取文件成功后触发的方法，接受一个事件对象，该对象的target.result就是文件的内容。
            //     trademarkParams.logoUrl = e.target.result
            // }
            // fr.readAsDataURL(file.raw);  
            
            // 给文件对象创建一个url地址，用来在页面上显示
            trademarkParams.logoUrl = window.URL.createObjectURL(file.raw)
            // logoImgUrl.value = window.URL.createObjectURL(file.raw)
            logoImgUrl.value = trademarkParams.logoUrl
            // 把文件对象添加到列表中
            fileList.value[0]=file.raw

            // return true
        } else {
            ElMessage({
                type: 'error',
                message: '上传的图片大小必须小于4M'
            })
            // return false
        }

    } else {
        ElMessage({
            type: 'error',
            message: '上传的图片格式必须为 png,jpg,gif 图片格式'
        })
        // return false
    }
}

// 上传文件前执行的函数，用来约束上传的文件类型
const beforeAvatarUpload = (file) => {
    console.log('上传文件前执行的方法');
    // 判断文件类型是不是 png,jpeg,gif 格式
    if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
        if (file.size / 1024 / 1024 < 4) {
            // console.log(file.raw);
            // let fr = new FileReader();
            // fr.onload = function(e){
            //     console.log(e.target.result);
            // }
            // let fr_url = fr.readAsDataURL(file.raw);
            return true
        } else {
            ElMessage({
                type: 'error',
                message: '上传的图片大小必须小于4M'
            })
            return false
        }

    } else {
        ElMessage({
            type: 'error',
            message: '上传的图片格式必须为 png,jpg,gif 图片格式'
        })
        return false
    }

}

// 上传文件
const fileUpload = async (file) => {
    console.log('文件开始上传');
    const formData = new FormData();
    formData.append('file', file);
    await reqUploadTrademarkLogo(formData,trademarkParams).then(res => {
        if(res.data.code==200){
            // 保存图片地址，data[0]?.logo 加个问号？是防止报错，只有当data[0]存在时才会执行后面的取值操作
            trademarkParams.logoUrl = res.data.data[0]?.logo
            // return res.data.data[0]?.logo
            // formRef.value.clearValidate('logoUrl')
            // return 'ok'
        }else{
            ElMessage({
                type:'error',
                message:'logo上传失败，'+res.data.msg
            })
            return Promise.reject(new Error(res.data.msg))
        }
        
    })
}

// 添加品牌
const addTrademark = () => {
    trademarkParams.id = null  // 这个的目的是为了防止编辑时残留的id值
    trademarkParams.tmName = ''  // 清空数据
    trademarkParams.logoUrl = ''  // 清空数据
    trademarkParams.is_system = ''  // 清空数据
    Object.assign(trademarkParams,{
        id:0,
        tmName:'',
        logoUrl:'',
        is_system:'',
        category_id:categoryStore.c3Id
    })


    fileList.value = []  // 清空上传文件列表

    // 如果遗留有错误信息，则清除错误信息，方法1
    // formRef.value?.clearValidate('tmName')
    // formRef.value?.clearValidate('logoUrl')

    // 如果遗留有错误信息，则清除错误信息，方法2
    nextTick(() => {
        formRef.value?.clearValidate('tmName')
        formRef.value?.clearValidate('logoUrl')
    })


    dialogFormVisible.value = true
}

// 编辑品牌
const updateTrademark = (row) => {
    // 清空数据校验错误信息
    nextTick(() => {
        formRef.value?.clearValidate('tmName')
        formRef.value?.clearValidate('logoUrl')
    })
    // 清空之前的上传文件列表
    fileList.value = []

    old_trademarkParams = row  // 记录数据
    trademarkParams.tmName = row.name
    trademarkParams.logoUrl = row.logo
    trademarkParams.id = row.id
    trademarkParams.is_system = row.is_system
    trademarkParams.category_id = row.category_id
    logoImgUrl.value = row.logo  // 展示图片

    dialogFormVisible.value = true
}
// 对话框取消按钮
const cancel = () => {
    dialogFormVisible.value = false
}
// 对话框确定按钮
const confirm = async () => {
    // 如果是修改数据，判断是不是系统数据
    if(trademarkParams.id && trademarkParams.is_system){
        ElMessage({
            type: 'error',
            message: '系统数据，不能修改，如果想修改，得加钱！'
        })
        return
    }
    
    // 对数据进行校验,如果校验不通过，后面的代码不会执行
    await formRef.value.validate()
    if (trademarkParams.id && old_trademarkParams.name == trademarkParams.tmName && old_trademarkParams.logo == trademarkParams.logoUrl) {
        console.log('数据未修改');
        dialogFormVisible.value = false  // 隐藏对话框
        return
    }

    

    // 如果用户修改了logo图片，则调用上传文件的方法，首先先上传logo，并拿到url地址
    if(fileList.value[0]){
        await fileUpload(fileList.value[0])
    }

    let result = await reqAddOrUpdateTrademark(trademarkParams)
    if (result.data.code == 200) {
        let message
        if (trademarkParams.id) {
            message = '品牌修改成功'
        } else {
            message = '品牌添加成功'
        }
        ElMessage({
            type: 'success',
            message: message
        })

        getHasTrademark(trademarkParams.id ? pageNo.value : 1)  // 重新获取数据

    } else {
        let message
        if (trademarkParams.id) {
            message = '品牌修改失败'
        } else {
            message = '品牌添加失败'
        }
        ElMessage({
            type: 'error',
            message: message + '，' + result.data.msg
        })
    }
    dialogFormVisible.value = false  // 隐藏对话框

}

// 自定义校验方法,默认会传入3个参数，rule，value，callback
const validatorTmName = (rule, value, callback) => {
    if (/^.{2,255}$/.test(value)) {
        callback()  // 符合条件，放行
    } else {
        callback(new Error('品牌名至少为 2 字符，最多为 255 个字符'))
    }
}
const validatorLogoUrl = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback(new Error('必须上传logo图片'))
    }
}
// 表单校验规则
const rules = {
    tmName: [
        // require:true必填字段，trigger:'blur'元素失去焦点时触发校验，validator自定义校验方法
        { require: true, trigger: 'blur', validator: validatorTmName }
    ],
    logoUrl: [
        // 注意，这个元素比较特殊，change和blur都不会触发校验
	    // 需要点击确定按钮提交数据的时候，触发formRef.value.validate() 方法来触发校验
        { require: true, trigger: 'change', validator: validatorLogoUrl }
    ]
}

// 点击气泡框确认按钮触发事件，删除品牌
const removeTradeMark = async (id)=>{
    // 删除品牌
    let result = await reqDeleteTrademark(id)
    if(result.data.code==200){
        ElMessage({
            type:'success',
            message:'删除品牌成功'
        })
        getHasTrademark(trademarkArr.value.length >1 ? pageNo.value :pageNo.value-1)
    }else{
        ElMessage({
            type:'error',
            message:`删除品牌失败，${result.data.msg}`
        })
    }
}


</script>

<template>
    <div>
        <Category :scene="scene"></Category>
        <el-card class="box-card" style="margin: 10px 0;">
            <!-- 按钮 -->
            <!-- <el-button type="primary" icon="Plus" @click="addTrademark" v-has="`btn.Trademark.add1`">添加品牌</el-button> -->
            <el-button v-has="`btn.Trademark.add`" type="primary" icon="Plus" @click="addTrademark" >添加品牌</el-button>

            <!-- 表格 -->
            <el-table style="margin:10px 0" border :data="trademarkArr">
                <!-- label显示的标题，width宽度，align文字对齐方式, vertical-align=middle可以设置 文字垂直对齐方式 -->
                <el-table-column label="序号" width="80px" align="center" type="index"></el-table-column>

                <!-- 可以用prop的方式展示数据，如果不需要修改样式的话可以用这种方式 -->
                <!-- <el-table-column label="品牌名称" prop="name"></el-table-column> -->

                <!-- 也可以用插槽的方式展示数据，这种方式的好处是可以自定义结构和样式，row就是列表中的数据，$index是序号 -->
                <el-table-column label="品牌名称">
                    <template #="{ row, $index }"> <span>{{ row.name }}</span>
                    </template>
                </el-table-column>

                <!-- 比如要显示图片的话用插槽就方便多了 -->
                <el-table-column label="品牌logo">
                    <template #="{ row, $index }"> <img :src="row.logo" alt="" style="width:50px;height:50px;"> </template>
                </el-table-column>
                
                <el-table-column label="创建时间" prop="create_time"></el-table-column>

                <!-- 气泡对话框 -->
                <el-table-column label="品牌操作">
                    <template #="{ row, $index }">
                        <el-button v-has="`btn.Trademark.edit`" type="primary" size="small" icon="Edit" title="编辑" @click="updateTrademark(row)"></el-button>
                        
                        <el-popconfirm :title="`你确定要删除\n${row.name} 吗?`" width="300px" icon="Delete"
                        @confirm="removeTradeMark(row.id)">
                            <template #reference>
                                <el-button v-has="`btn.Trademark.delete`" type="primary" size="small" icon="Delete" title="删除"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页器 -->
            <!-- v-model:current-page="pageNo"给子组件传递参数, pager-count设置按钮个数-->
            <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[10, 20, 30, 50]" background
                layout="prev, pager, next, jumper, total, sizes" :total="total"
                @current-change="getHasTrademark" @size-change="sizeChange" />
        </el-card>

        <!-- 对话框 :close-on-click-modal=false点击背景网页不关闭对话框  -->
        <el-dialog v-model="dialogFormVisible" :title="trademarkParams.id ? '修改品牌' : '添加品牌'">

            <!-- ref="formRef" 绑定组件，之后可以用formRef来获取这个组件的实例  -->
            <el-form style="width:80%;" :model="trademarkParams" :rules="rules" ref="formRef">
                <el-form-item label="品牌名称" label-width="80px" prop="tmName">
                    <el-input placeholder="请输入品牌名" v-model="trademarkParams.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌logo" label-width="80px" prop="logoUrl">
                    <!-- upload相关属性，action请求url, http-request自定义上传方法 -->
                    <el-upload class="avatar-uploader" :action = "`http://${settings.REMOTE_HOST}:2233/api/trademark/file_upload/`"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-change="fileChange"
                        :auto-upload="false" :http-request="fileUpload" ref="file_upload" >
                        <!-- <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" class="avatar" /> -->
                        <img v-if="trademarkParams.logoUrl" :src="logoImgUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>

            <!-- 具名插槽 -->
            <template #footer>
                <el-button type="primary" @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>